<template>
  <u-popup v-model="isShow" mode="bottom">
    <div class="share-warp">
      <div
        class="share-item"
        @click="onHandleShare('weixin', 'WXSceneSession')"
      >
        <image src="/static/weixin@2x.png" />
        <span>微信</span>
      </div>
      <!-- <div class="share-item" @click="wexinShare('weixin', 'WXSenceTimeline')">
        <image src="/static/pengyouquan@2x.png" />
        <span>朋友圈</span>
      </div> -->
      <div
        class="share-item"
        @click="onHandleShare('qq')"
        v-if="platform !== 'ios'"
      >
        <image src="/static/qq@2x.png" />
        <span>QQ</span>
      </div>
      <div class="share-item" @click="onHandleShare(null)">
        <image src="/static/lianjie@2x.png" />
        <span>复制链接</span>
      </div>
    </div>
  </u-popup>
</template>

<script lang="ts">
import { h5BaseUrl } from '@/config';
import Vue from 'vue';
// 默认分享配置
const defaultConfig = {
  title: '神指应用',
  href: h5BaseUrl,
  summary: '我正在使用神指应用，快来一起使用吧！',
  imageUrl: 'https://qie-online-sale-qiniu.wsandos.com/load.png',
};
export default Vue.extend({
  model: {
    prop: 'show',
    event: 'change',
  },
  props: {
    show: Boolean,
    config: {
      type: Object,
      // type: Object as () => typeof defaultConfig,
      // default: defaultConfig,
    },
  },
  data: () => ({
    isShow: false,
    platform: '', // 系统
  }),
  methods: {
    //微信分享
    wexinShare(provider: string, scene: string) {
      const config = {
        scene,
        provider,
        ...defaultConfig,
        ...this.config,
      };
      console.log(config, 'zidingji');
      uni.share({
        provider: 'weixin',
        scene,
        type: 0,
        href: config.href,
        title: config.title,
        summary: config.summary,
        // imageUrl: 'https://pshangcheng.wsandos.com/pic/15923880777850',
        imageUrl: config.imageUrl,
        success: (result) => {
          console.log('---result---', result);
        },
        fail: (error) => {
          console.log('---error---', error);
          uni.showToast({ title: '分享失败', icon: 'none' });
        },
      });
    },
    // 处理分享配置
    onHandleShare(provider: UniApp.ShareOptions['provider'], scene: string) {
      const config = {
        type: provider === 'qq' ? 1 : 0,
        scene,
        provider,
        ...defaultConfig,
        ...this.config,
      };

      // 如为空, 代表复制链接
      if (!provider) {
        uni.setClipboardData({ data: config.href });
        return false;
      }
      config.imageUrl = '';
      uni.share({
        provider,
        type: provider == 'qq' ? 2 : 0,
        href: config.href,
        imageUrl: config.imageUrl,
        title: config.title,
        summary: config.summary,
        scene: config.scene,
        fail: () => {},
      });
    },
  },
  computed: {},
  watch: {
    isShow(newVal) {
      this.$emit('change', newVal);
    },
    show(newVal) {
      this.isShow = newVal;
    },
  },

  // 组件周期函数--监听组件挂载完毕
  mounted() {
    this.platform = uni.getSystemInfoSync().platform;
  },
  // 组件周期函数--监听组件数据更新之前
  beforeUpdate() {},
  // 组件周期函数--监听组件数据更新之后
  updated() {},
  // 组件周期函数--监听组件激活(显示)
  activated() {},
  // 组件周期函数--监听组件停用(隐藏)
  deactivated() {},
  // 组件周期函数--监听组件销毁之前
  beforeDestroy() {},
});
</script>

<style lang="scss">
/* 分享下拉框 */
.share-warp {
  padding: $uni-font-size-title;
  display: flex;
  justify-content: space-between;
  .share-item {
    display: flex;
    width: 150rpx;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    // &:first-child {
    //   margin-right: 40rpx;
    // }
    image {
      width: 100rpx;
      height: 100rpx;
      margin-bottom: $uni-spacing-row-base;
    }
    span {
      font-size: 28rpx;
      color: #020202;
    }
  }
}
</style>
